.directory {
  @apply rounded bg-slate-900 p-5 font-mono text-base text-white;
  user-select: none;
}

.directory .tree,
.directory .tree-node,
.directory .tree-node-group {
  @apply m-0 list-none p-0;
}

.directory .tree-branch-wrapper,
.directory .tree-node__leaf {
  outline: none;
  outline: none;
}

.directory .tree-node {
  cursor: pointer;
  @apply py-1;
}

.directory .tree-node:hover {
  background: rgba(255, 255, 255, 0.1);
}

.directory .tree .tree-node--focused {
  background: rgba(255, 255, 255, 0.2);
}

.directory .tree .tree-node--selected {
  @apply rounded-sm bg-slate-700 text-white;
}

.tree-node__branch,
.tree-node__leaf {
  display: flex;
  align-items: center;
}

.directory .icon {
  @apply h-6 w-6 pr-2;
}

@keyframes flash-background-quickly {
  0% {
    background-color: inherit;
  }
  25% {
    @apply bg-amber-400;
  }
  100% {
    background-color: inherit;
  }
}

.freshly-updated-file {
  animation: flash-background-quickly 2s linear;
}
